<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
    <style>
        p>span {
            padding: 5px 10px;
            background-color: aliceblue;
            margin: 0 10px;
        }

        .active {
            background-color: #f66;
        }

        section {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .content {
            width: 100px;
            height: 100px;
            border: 1px solid #f66;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div id='app'>
        <h1>{{count}}</h1>
        <!-- 内联事件处理器,事件被触发时执行内联的 js 语句 -->
        <button @click="count++">点击加 1</button>
        <!-- 方法事件处理器，一个指向组件上定义的方法名称 -->
        <button @click="addClick">点击加 1</button>

        <p>
            <!-- 绑定事件处理器 $event如果定义的函数不在形参里面写event可以拿到，但是写了，则要在@click里面传$event -->
            <span :class="{active: index == 0}" @click="changeIndex(0,$event)">热搜榜</span>
            <span :class="{active: index == 1}" @click="changeIndex(1)">杭州榜</span>
            <span :class="{active: index == 2}" @click="changeIndex(2)">民生榜</span>
            <span :class="{active: index == 3}" @click="changeIndex(3)">财经榜</span>
        </p>


        <!-- .self 该事件指明只有自身被点击的时候才会触发 -->
        <!-- <section @click.self="boxClick"> -->
        <!-- .capture 触发内部事件的时候，先执行外部事件，本来冒泡是从内到外，现在加了.capture则先外后内 -->
        <!-- <section @click.capture="boxClick"> -->
        <section @click="boxClick">
            外部 section
            <!-- .stop 用来阻止冒泡，点击的时候不会执行父元素的事件 -->
            <!-- <button @click.stop="btnClick">内部按钮</button> -->
            <!-- .prevent 用来阻止默认事件用的 -->
            <!-- <a href="https://www.jd.com" @click.prevent="btnClick">点击进入百度</a> -->

            <!-- .once 一次性的事件 -->
            <button @click.once="btnClick">内部按钮</button>
        </section>

        <!-- passive 提升移动端性能 -->
        <div class="content" @scroll.passive="myScroll">
            总书记和大家说，贫困地区要从实际出发，因地制宜，把种什么、养什么、从哪里增收想明白，帮助乡亲们寻找脱贫致富的好路子。在这里，习近平总书记首次提出了“精准扶贫”。十八洞村抓住“精准”二字，立足资源禀赋，做好特色文章：对接高校和设计公司开发苗绣产品，流转邻村土地建设猕猴桃基地，依托自然风光办起农家乐，逐步形成特色种植、苗绣、旅游等支柱产业。2017年，十八洞村实现脱贫。2024年，十八洞村集体经济突破600万元，人均年收入达到28000元。村里还新建了综合日间照料中心，探索农村居家养老。
            总书记和大家说，贫困地区要从实际出发，因地制宜，把种什么、养什么、从哪里增收想明白，帮助乡亲们寻找脱贫致富的好路子。在这里，习近平总书记首次提出了“精准扶贫”。十八洞村抓住“精准”二字，立足资源禀赋，做好特色文章：对接高校和设计公司开发苗绣产品，流转邻村土地建设猕猴桃基地，依托自然风光办起农家乐，逐步形成特色种植、苗绣、旅游等支柱产业。2017年，十八洞村实现脱贫。2024年，十八洞村集体经济突破600万元，人均年收入达到28000元。村里还新建了综合日间照料中心，探索农村居家养老。
            总书记和大家说，贫困地区要从实际出发，因地制宜，把种什么、养什么、从哪里增收想明白，帮助乡亲们寻找脱贫致富的好路子。在这里，习近平总书记首次提出了“精准扶贫”。十八洞村抓住“精准”二字，立足资源禀赋，做好特色文章：对接高校和设计公司开发苗绣产品，流转邻村土地建设猕猴桃基地，依托自然风光办起农家乐，逐步形成特色种植、苗绣、旅游等支柱产业。2017年，十八洞村实现脱贫。2024年，十八洞村集体经济突破600万元，人均年收入达到28000元。村里还新建了综合日间照料中心，探索农村居家养老。
        </div>
        <!-- 输入框点击回车会触发事件，除了enter还有其他一些 -->
        <input type="text" @keyup.enter="keyup">

    </div>
</body>
<script>
    const app = {
        data() {
            return {
                count: 100,
                index: 0
            }
        },
        methods: {
            addClick() {
                this.count++
            },
            changeIndex(num) {
                this.index = num
                console.log(event);

            },
            boxClick() {
                console.log('外部的 section 被点击了');

            },
            btnClick() {
                console.log('内部的 button 被点击了');
            },
            myScroll() {
                console.log('滚动了');

            },
            keyup() {
                console.log(event.target.value);

            }
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>